<template>
    <div class="cont" ref="mapChart"></div>
  <div class="back-zj" v-if="isShowBackZj" @click="backZj">返回浙江省</div>
  <ul class="menu">
    <li 
      v-for="(item, index) in effectMenu" 
      :class="{active: currentIndex === index}" 
      :key="index" 
      @click="changeEffect(item.name, index)"
      >
      {{ item.name }}
    </li>
  </ul>
</template>

<script setup lang="ts">
import { ref } from 'vue'
  const effectMenu = ref([
    { name: '基础地图' },
    { name: '热力图' },
    { name: '涟漪图' },
    { name: '多色地图' },
    { name: '运输路线' },
  ])
  const currentIndex = ref(0)
  const isShowBackZj = ref(false)
  const backZj = () => {
  }
  const changeEffect = (name: string, index) => {
    currentIndex.value = index
    switch (name) {
      case '基础地图':
        break;
      case '涟漪图':
        break;
      case '运输路线':
        break
      case '热力图':
        break
      case '多色地图':
        break
      default:
        break;
    }
  }
</script>

<style scoped lang="less">
.cont {
  height: 90%;
}
.menu {
  display: flex;
  justify-content: space-around;
  li {
    width: 120px;
    height: 30px;
    line-height: 30px;
    border-radius: 30px;
    border: 1px solid pink;
    cursor: pointer;
  }
}
.back-zj {
  cursor: pointer;
  color: rgb(86, 237, 237);
}
.active {
  background-color: pink;
}
</style>